@import './variables.scss';
@import './mixin.scss';
@import './transition.scss';
@import './element-ui.scss';
@import './sidebar.scss';

body {
  height: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}

label {
  font-weight: 700;
}

html {
  height: 100%;
  box-sizing: border-box;
}

#app{
  height: 100%;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  outline: none;
  text-decoration: none;
}

div:focus{
  outline: none;
 }

a:focus,
a:active {
  outline: none;
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}

//main-container全局样式
.app-main {
  /*80 = navbar  */
  min-height: calc(100vh - 80px);
  position: relative;
  overflow: hidden;
}
#app .main-container{
  padding-top: 80px;
}
.app-container {
  padding: 20px;

}
.breadcrumbLocation{ padding: 0 3% 3%;}
.el-card__body{ padding: 20px 5%;}
.el-input__inner:focus{ border-color: #38c474;}
.el-select .el-input__inner:focus{ border-color: #38c474;}
.el-select .el-input.is-focus .el-input__inner{ border-color: #38c474;}
.el-select-dropdown__item.selected{ color: #38c474;}
.avatar-uploader .el-upload:hover{ border-color:#38c474 !important;}
//flex
.flexCon{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-pack:center; -webkit-justify-content:center; justify-content:center; -webkit-box-pack:center; -webkit-flex-flow:column wrap; -ms-flex-flow:column wrap; flex-flow:column wrap; align-items:center;}
//search
.searchBox{ max-width: 440px; margin: 30px 0;}
.searchInput .el-input__inner{ border-right: none;}
.searchInput .el-input__inner:focus{ border-color: #38c474;}
.searchBtn{ width: 102px; background: #38c474 !important; color: #ffffff !important; border-color: #38c474 !important;}
//order
.orderTable{ width: 100%; border: 1px solid #e0e0e0; border-radius: 5px; font-size: 16px;}
.orderTable .el-input__inner{ text-align: center;}
.orderTable thead th{ background: #f8faf5; font-size: 16px; color: #666666; font-weight: normal; padding: 20px 0;}
.orderTable.el-table td{ padding: 20px 1%;}
.orderTable.el-table th > .cell.highlight{ color:#38c474;}
.orderTable.el-table th > .cell.highlight .el-table__column-filter-trigger i{ color:#38c474;}
.orderOption{ list-style: none; overflow: hidden; padding: 0; margin: 0; display: inline-block; vertical-align: middle;}
.orderOption li{ display: inline-block; vertical-align: middle; line-height: 16px; padding: 0 5px; margin: 5px 0; border-left: 1px solid #0ead52; margin-left: -1px;}
.orderOption li button{ padding: 0;}
.adImg{ display: block; margin: 0 auto; max-width: 100%; border-radius: 5px;}
.status1{ color: #0ead52;}
.status2{ color: #0ead52;}
.status3{ color: #0ead52;}
.status4{ color: #0ead52;}
.status5{ color: #0ead52;}
.status6{ color: #0ead52;}
.status7{ color: #0ead52;}
.pageBox{ padding: 35px 0; text-align: center;}
.pageBox li.active,.pageBox li:hover,.pageBox button:hover{ color: #a3ff40;}
.pageBox button.el-button{ width: 102px; height: 35px; padding: 0; line-height: 35px; border: none; margin: 0 auto;}
.el-table--enable-row-hover .el-table__body tr:hover > td{ background-color: #f8faf5;}

.xian{ height: 5px; background: #0ead52; border-radius: 3px; margin-bottom: -5px; position:relative;}
.tip{ font-size: 14px; color: #ff1100; margin-bottom: 15px; margin-top: -10px;}
.timeSelect{ padding: 15px 0 20px; overflow: hidden;}
.timeSelect .el-form-item__label{ font-weight: normal; font-size: 16px; color: #989898;}
.el-button--primary{ color: #ffffff !important; background: #0ead52 !important; border-color: #0ead52 !important;}
.timeSelect .el-button--primary{ color: #ffffff !important; background: #0ead52 !important; border-color: #0ead52 !important;}
.timeSelect .el-form-item{ margin-bottom: 15px;}
.selectHotel{ float: right;}
.orderTable2.el-table--enable-row-hover .el-table__body tr:hover > td{ color: #0ead52;}
.orderTable3{ font-size: 16px;}
.orderTable3.el-table--enable-row-hover .el-table__body tr:hover > td:first-child{ color: #0ead52;}
.orderTable3.el-table--enable-row-hover .el-table__body tr:hover > td:nth-child(2){ color: #0ead52;}
.orderTable3.el-table--enable-row-hover .el-table__body tr:hover > td:nth-child(3){ color: #0ead52;}
.inputMax{ min-width: 260px;}
.inputMax2{ min-width: 380px;}

.userTop{ overflow: hidden; padding: 25px 0 40px;}
.userTop button{ float: right; width: 102px; height: 35px; padding: 0; line-height: 35px; border: none;}
.userTopTit{ margin: 0; font-size: 34px; color: #333333; font-weight: normal;}

.mainBg{ min-height: calc(100vh - 200px);}
.seller{ background: #f7f7f7; font-size: 16px; line-height: 200%; color: #666666; font-weight: normal; margin: 0 auto 8px;}
.seller a{ display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 9px 8%; transition: all 0.3s linear;}
.seller a:hover{ background: #fbfff4; color: #0ead52;}

@media screen and (max-width: 1600px) {
  #app .main-container{ padding-top: 60px;}
  .el-card__body{ padding: 20px 4%;}
  .searchBox{ margin: 15px 0 30px;}
  .orderTable{ font-size: 14px;}
  .orderTable thead th{ font-size: 14px;}
  .orderTable.el-table td{ padding: 10px 0;}
  .pageBox{ padding: 20px 0;}
  .timeSelect{ padding: 5px 0 10px;}
  .timeSelect .el-form-item__label{ font-size: 14px;}
  .calendarItem .el-form-item__content{ width: 140px;}
  .defualtInput .el-form-item__content{ width: 140px;}
  .orderTable3{ font-size: 14px;}
  .inputMax{ min-width: 230px;}
  .userTop{ padding: 15px 0 30px;}
  .userTopTit{ font-size: 28px;}
  .seller{ font-size: 15px;}
  .inputMax{ min-width: 40px;}
  .inputMax2{ min-width: 240px;}
}
@media screen and (max-width: 1400px) {
  .userTopTit{ font-size: 24px; line-height: 35px;}
}
@media screen and (max-width: 1200px) {
  .userTop{ padding: 10px 0 20px;}
  .userTopTit{ font-size: 22px; line-height: 35px;}
  .timeSelect .el-button--primary{ padding: 12px;}
}
@media screen and (max-width: 768px) {
  .breadcrumbLocation{ padding: 10px 15px !important;}
  .searchBox{ margin: 0 0 15px;}
  .orderTable thead th{ padding: 5px 0;}
  .pageBox .el-pagination__jump{ display: block !important; margin-top: 5px;}
  .xian{ height: 3px; margin-bottom: -2px; border-radius: 2px;}
  .timeSelect{ padding: 0 0 15px;}
  .timeSelect .el-form-item{ margin-bottom: 4px;}
  .timeSelect .el-form-item__content{ display: block;}
  .calendarItem .el-form-item__content{ width: 100%;}
  .defualtInput .el-form-item__content{ width: 100%;}
  .timeSelect .tabItem{ display: block;}
  .tabBtn{ margin: 15px auto !important;}
  .selectHotel{ float: none; display: block !important;}
  .selectHotel .el-select{ display: block;}
  .inputMax{ min-width: 0;}
  .inputMax2{ min-width: 0;}
}
@media screen and (max-width: 640px) {
  #app .main-container{ padding-top: 50px;}
  .userTop{ padding: 0 0 10px;}
  .userTop button{ float: none; height: 32px; line-height: 32px; margin-bottom: 10px;}
  .userTopTit{ font-size: 18px; line-height: 30px;}
}
@media screen and (max-width: 480px) {
  .pageBox{ padding: 20px 0 10px;}
  .pageBox .el-pagination .btn-prev{ padding-right: 0;}
  .pageBox .el-pagination .btn-next{ padding-left: 0;}
  .pageBox .el-pager li{ min-width: 23px;}
  .userTopTit{ font-size: 16px;}
}
